<template>
    <div class="home">
        <div id="myChart" style="width: 1350px;height:600px; margin:0 auto"></div>
        <div style="width:1350px;overflow:hidden; height:600px;margin:0 auto">
            <div style="width:800px;float:left">
                <div id="myChart1" style="width: 800px;height:600px; margin:0 auto"></div>
            </div>
            <div style="width:500px;float:right">
                <div>
                    2222222222222222222222
                </div>
            </div>
        </div>

        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <template v-for="(item, index) in $router.options.routes">
                        <el-menu-item :index="index + 1" :key="item.path">{{ item.name }}</el-menu-item>
                    </template>
                </el-menu> -->
    </div>
</template>

<script>
// @ is an alias to /src

export default {
    name: 'Home',
    components: {},
    mounted() {
        this.InitChart()
        this.InitChart3()
    },
    methods: {
        InitChart() {
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '未来一周气温变化',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['单个供应商', '单笔订单', '实例价格'],
                    left: '100'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '单个供应商',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12, 9],
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: '平均值' }]
                        }
                    },
                    {
                        name: '单笔订单',
                        type: 'line',
                        data: [1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: '最大值'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        name: '实例价格',
                        type: 'line',
                        data: [0, 2, 2, 3, 5, 6, 5],
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: '平均值' }]
                        }
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function(e) {
                console.log('444', e)
            })
        },
        InitChart3() {
            let myChart = this.$echarts.init(document.getElementById('myChart1'))
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '0%',
                    data: ['直接访问', '百度']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    top: '30',
                    left: '10',
                    right: '10',
                    bottom: '10',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisTick: { show: false }
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            //填充颜色
                            color: new this.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(1, 132, 213, 0.4)' // 渐变色的起始颜色
                                    },
                                    {
                                        offset: 0.8,
                                        color: 'rgba(1, 132, 213, 0.1)' // 渐变线的结束颜色
                                    }
                                ],
                                false
                            ),
                            shadowColor: 'rgba(0, 0, 0, 0.1)'
                        },
                        lineStyle: {
                            color: '#0184d5',
                            width: '2'
                        },
                        symbol: 'circle',
                        symbolSize: 8,
                        showSymbol: false,
                        itemStyle: {
                            color: '#0184d5',
                            borderColor: 'rgba(221,220,107,.1)',
                            borderWidth: 12
                        },
                        data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30]
                    },
                    {
                        name: '百度',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            normal: {
                                color: '#00d887',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(0, 216, 135, 0.4)'
                                        },
                                        {
                                            offset: 0.8,
                                            color: 'rgba(0, 216, 135, 0.1)'
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        // 设置拐点 小圆点
                        symbol: 'circle',
                        // 拐点大小
                        symbolSize: 5,
                        // 设置拐点颜色以及边框
                        itemStyle: {
                            color: '#00d887',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        },
                        // 开始不显示拐点， 鼠标经过显示
                        showSymbol: false,
                        data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20]
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function(e) {
                console.log('444', e)
            })
        }
    }
}
</script>
